body{
  background-color: #fff;
  color:#555;
  font-family: 'Avenir Next','Lantinghei SC';
  font-size:14px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
[cloak]{
  opacity: 0!important;
}
.spinner{
  font-size:80px;
  width:1em;
  height:1em;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border-radius: 50%;
  box-shadow: inset 0 0  0 .1em rgba(58, 168, 237, .5);
  z-index:1000;
}
.spinner i {
  position: absolute;
  width:1em;
  height: 1em;
  clip:rect(0 1em 1em .5em);
  animation: spinner-clipper .9s ease-in-out infinite;
}
@keyframes spinner-clipper {
  from{
    transform:rotate(0deg);
  }
  to{
    transform:rotate(180deg);
  }
}
.spinner i::after{
  position: absolute;
  content:'';
  width:1em;
  height:1em;
  border-radius: 50%;
  box-shadow: inset 0 0 0 .1em #3aa8ed;
  clip:rect(0 .5em 1em 0);
  animation: spinner .9s ease-in-out infinite;
}
@keyframes spinner {
  from{
    transfrom:rotate(0deg);
  }
  to{
    transform:rotate(360deg);
  }
}
.wrap{
  width:100%;
  height:600px;
  position: absolute;
  top:50%;
  margin-top:-300px;
  background-color: #333;
  overflow: hidden;
  -webkit-perspective:800px;
  perspective: 800px;
}
/* 海报样式 */
.photo{
  position:absolute;
  width:260px;
  height: 320px;
  z-index: 1;
  box-shadow: 0 0 1px rgba(0,0,0,.01);
  transition:all .5s;
  -moz-transition: all .5s; /* Firefox 4 */
  -webkit-transition: all .5s; /* Safari 和 Chrome */
  -o-transition: all .5s; /* Opera */
  left:50%;
  top:50%;
  margin:-160px 0 0 -130px;
  transform:scale(1);
}
/* 负责翻转 */
.photo .photo-wrap{
  position: absolute;
  width:100%;
  height: 100%;
  transform-style: preserve-3d;
  -webkit-transform-style:preserve-3d;
  transition:all .6s ease-in-out;
  -webkit-transition: all .6s ease-in-out;/* Safari 和 Chrome */
  -moz-transition: all .5s; /* Firefox 4 */
  -o-transition: all .5s; /* Opera */
  transform-origin:0% 50% 0px;
  -ms-transform-origin: 0% 50% 0px;/* IE 9 */
  -o-transform-origin: 0% 50% 0px;/* Opera */
  -webkit-transform-origin: 0% 50% 0px;/* Safari 和 Chrome */
  -moz-transform-origin: 0% 50% 0px;/* Firefox */
}
.photo .photo-wrap .side{
  position:absolute;
  width:100%;
  height:100%;
  background-color: #eee;
  top:0;
  right:0;
  padding:20px;
  box-sizing: border-box;
  backface-visibility: hidden;
  -webkit-backface-visibility:hidden;    /* Chrome 和 Safari */
  -moz-backface-visibility:hidden;     /* Firefox */
  -ms-backface-visibility:hidden;     /* Internet Explorer */
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}
.photo .photo-wrap .side::-webkit-scrollbar{
  display:none;
}
.photo .photo-warp .side-front{
  transform:rotateY(0deg);
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
}
.photo .photo-wrap .side-front .image{
  width:100%;
  height: 250px;
  line-height: 250px;
  overflow: hidden;
}
.photo .photo-wrap .side-front .image img{
  width:100%;
  vertical-align: middle;/*使高度不够的图片居中显示*/
}
.photo .photo-wrap .side-front .caption{
  text-align: center;
  font-size: 16px;
  line-height: 50px;
}
.photo .photo-wrap .side-back{
  transform:rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
}
.photo .photo-wrap .side-back .desc{
  color:#666;
  font-size: 14px;
  line-height: 1.5em;
}
.photo_center{
  top:50%;
  left:50%;
  margin:-160px 0 0 -130px;
  z-index: 2;
  transform:scale(1.3);
}
.photo_front .photo-wrap{
  transform:translate(0,0) rotateY(0deg);
}
.photo_back .photo-wrap{
  transform:translate(260px,0px) rotateY(180deg);
}

.nav{
  position: absolute;
  width:80%;
  left:10%;
  height: 30px;
  line-height: 30px;
  bottom:20px;
  z-index:3;
  text-align: center;
}
.nav .i{
  display: inline-block;
  width:30px;
  height:30px;
  cursor:pointer;
  background-color: #aaa;
  text-align: center;
  border-radius: 50%;
  transform:scale(.5);
  transition:all .5s;
}
.nav .i::after{
  content:'\27F2';
  font-family: 'icomoon';
  font-size:20px;
  display: inline-block;
  line-height: 30px;
  text-align: center;
  color:#fff;
  opacity:0;
}
/* 选中样式 */
.nav .i_current{
  transform: scale(1);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
  -ms-transform: scale(1);
}
.nav .i_current::after{
  opacity: 1;
}
/* 背面样式 */
.nav .i_back{
  background-color: #555;
  transform:rotateY(180deg);
}
